<template>
  <!-- 同类型的3级分类列表 -->
  <div class="content">
    <div class="thirdctgys">
      <span
        :class="{
          'thirdctgys-item': true,
          isActive: switchThirdCtgyIndex === -1,
        }"
        @click="changeThirdCtgyIndex(-1)"
        >全部</span
      >
    </div>
    <div
      class="thirdctgys"
      v-for="(ctgy, index) in getIsReadyOpen
        ? getSubThirdCtgyList
        : getThirdCtgyList"
      :key="ctgy.thirdctgyid"
    >
      <span
        :class="{
          'thirdctgys-item': true,
          isActive: switchThirdCtgyIndex === ctgy.thirdctgyid,
        }"
        @click="changeThirdCtgyIndex(ctgy.thirdctgyid)"
      >
        {{ ctgy.thirdname }}</span
      >
    </div>
    <div class="icon">
      <span v-show="getIsReadyOpen" @click="openOrCollapseInBook(false)">
        <i class="iconfont icon-xiangxiajiantou"></i>
      </span>
      <span v-show="!getIsReadyOpen" @click="openOrCollapseInBook(true)">
        <i class="iconfont icon-xiangshangjiantou"></i>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import FirstToThirdCtgy from "@/piniaviews/ctgy/service"

const {
  storeRefs: { getThirdCtgyList, getSubThirdCtgyList, getIsReadyOpen,switchThirdCtgyIndex },
  openOrCollapseInBook,
  changeThirdCtgyIndex,
} = FirstToThirdCtgy
</script>

<style lang="scss" scoped>
.content {
  margin-top: 0.275rem;
  width: 5.04rem;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  .thirdctgys {
    font-size: 0.23rem;
    margin: 0.15rem .5rem 0 0;
    &-item {
      text-shadow: 0 0 0.01rem gray;
      padding: 0.05rem 0.15rem;
    }
    .isActive {
      color: #fff;
      background-color: #fe463c;
      border-radius: 0.3rem;
    }
  }
  .icon {
    position: absolute;
    right: 0.2rem;
    top: 0.15rem;
    padding: .075rem;
  }
}
</style>
